<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="生态合作伙伴" name="first">
        <div class="container">  
            <img v-for="index in 18" :key="index" class="photo" src="@/assets/images/logo.png" alt="">  
            
            <!-- 以此类推，添加更多照片 -->  
        </div>
      </el-tab-pane>
      <el-tab-pane label="战略合作媒体" name="second">
        <div class="container">  
            <img v-for="index in 18" :key="index" class="photo" src="@/assets/images/logo.png" alt="">  
            
            <!-- 以此类推，添加更多照片 -->  
        </div>
      </el-tab-pane>
      <el-tab-pane label="新闻媒体" name="third">
        <div class="container">  
            <img v-for="index in 18" :key="index" class="photo" src="@/assets/images/logo.png" alt="">  
            
            <!-- 以此类推，添加更多照片 -->  
        </div>
      </el-tab-pane>
    </el-tabs>
  </template>
<script lang="ts" setup>
    import { ref } from 'vue'
    import type { TabsPaneContext } from 'element-plus'

    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
    }
</script>
<style>
    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
    .container {  
        display: grid;  
        grid-template-columns: repeat(6, 1fr); /* n为照片数量 */  
        grid-gap: gap; /* 照片之间的间隙 */  
        justify-items: center; /* 水平居中 */  
        align-items: center; /* 垂直居中 */  
        .photo{
            width: 100%;
        }
    }
</style>
  